<template>
  <div class="cell_group">
    <div class="cell">
      <div class="title">
        {{config.attrName}}
      </div>
      <div class="picker" @click="popupShow=true">
        {{config.value}}
        <img src="@/assets/img/right.png" alt="">
      </div>
      <van-popup v-model="popupShow" position="bottom">
        <van-picker :columns="config.attrValueList" :default-index="0" @change="onChange" />
      </van-popup>
    </div>
  </div>
</template>
<script>
export default {
  name: "picker",
  props: {
    config: {
      type: Object,
      required: true
    },
    parentIndex: Number,
    itemIndex: Number
  },
  data() {
    return {
      popupShow: false,
      // pickerValue: this.config.attrValueList[0],
      noWrong: true
    };
  },
  created() {
    if (this.config.value) {
      // this.pickerValue = this.config.value;
    }else{
      this.config.value = this.config.attrValueList[0]
      this.$emit("changeValue", this.parentIndex, this.itemIndex, this.config);

    }
  },
  methods: {
    onChange(value, index) {
      // this.pickerValue = index;
      this.popupShow = false;
      this.config.value = index;
      this.$emit("changeValue", this.parentIndex, this.itemIndex, this.config);

      // this.$emit("getIdCart", this.config);
    }
  }
};
</script>
<style lang="less">
.picker {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  font-size: 0.4rem;
  font-family: PingFangSC-Regular;
  color: #666666;
  width: 60%;
  height: 100%;
  img {
    width: 0.186667rem;
    height: 0.346667rem;
    padding-left: 0.213333rem;
  }
}
</style>

